<template>
	<d2-container>
		<!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="6">
						<el-form-item label="订单号" prop="orderNo">
							<el-input type="text" v-model="queryForm.orderNo" placeholder="请输入订单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="券商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入券商品名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="会员账号" prop="userName">
							<el-input type="text" v-model="queryForm.userName" placeholder="请输入会员账号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="订单状态" prop="orderStatus">
							<el-select v-model="queryForm.orderStatus" placeholder="请选择订单状态">
								<el-option label="全部" value=""></el-option>
								<el-option label="初始状态" value="0"></el-option>
								<el-option label="待付款" value="1"></el-option>
								<el-option label="已付款" value="2"></el-option>
								<el-option label="已取消" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="queryForm.payType" placeholder="请选择支付方式">
								<el-option label="全部" value=""></el-option>
								<el-option label="余额支付" value="1"></el-option>
								<el-option label="支付宝" value="2"></el-option>
								<el-option label="微信" value="3"></el-option>
								<el-option label="通联支付" value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
									v-model="time"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>
			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
				<el-table-column prop="userName" label="会员账号" width="110"></el-table-column>
				<el-table-column prop="productName" label="消费券商品名称"></el-table-column>
				<el-table-column prop="couponDenomination" label="消费券面额(元)" width="120"></el-table-column>
                <el-table-column prop="couponPrice" label="销售金额(元)" width="110"></el-table-column>
				<el-table-column prop="orderQuantity" label="数量" width="100"></el-table-column>
				<el-table-column prop="orderAmount" label="订单金额(元)" width="120"></el-table-column>
				<el-table-column prop="orderStatus" label="订单状态" width="110">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.orderStatus==0">初始状态</el-tag>
                        <el-tag v-if="scope.row.orderStatus==1">待付款</el-tag>
                        <el-tag v-if="scope.row.orderStatus==2">已付款</el-tag>
						<el-tag v-if="scope.row.orderStatus==3">已取消</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="payAmount" label="实付金额(元)" width="120"></el-table-column>
				<el-table-column prop="payType" label="支付方式" width="110">
					<template slot-scope="scope">
                        <el-tag v-if="scope.row.payType==1">余额支付</el-tag>
                        <el-tag v-if="scope.row.payType==2">支付宝</el-tag>
						<el-tag v-if="scope.row.payType==3">微信</el-tag>
                        <el-tag v-if="scope.row.payType==4">通联支付</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="payTime" label="支付时间" width="150" :formatter="forDatePay"></el-table-column>
				<!-- <el-table-column prop="transactionId" label="交易流水号" width="80"></el-table-column>
				<el-table-column prop="allinpayOrderNo" label="通联支付编号" width="80"></el-table-column> -->
				<el-table-column prop="createTime" label="创建时间" width="150" :formatter="forDateCreate"></el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

	</d2-container>
</template>

<script>
import { findOrderCouponListByPage } from '@api/coupon/orderCoupon'
import dayjs from 'dayjs'
export default {
  name: 'coupon-orderCouponList',
  data () {
    return {
      queryForm: {
		orderNo: '',
        productName: '',
		userName: '',
        orderStatus: '',
		payType: '',
        createTimeBegin: '',
        createTimeEnd: ''
      },
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	  tableData: [],
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  multipleSelection: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
	resetPage () {
        this.currentPage = 1,
        this.pageSize = 10,
        this.total = 0
    },
	submitForm (formName) {
		this.resetPage()
        this.fetchData()
	},
	resetForm (formName) {
		this.$refs[formName].resetFields()
        this.time = []
        this.resetPage()
        this.fetchData()
	},
	fetchData () {
      this.loading = true
      this.queryForm.createTimeBegin = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm.createTimeEnd = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findOrderCouponListByPage({
        orderNo: this.queryForm.orderNo,
        productName: this.queryForm.productName,
		userName: this.queryForm.userName,
        orderStatus: this.queryForm.orderStatus,
		payType: this.queryForm.payType,
        startTime: this.queryForm.createTimeBegin,
        endTime: this.queryForm.createTimeEnd,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
	handleSizeChange (val) {
	    this.pageSize = val
		this.fetchData()
	},
	handleCurrentChange (val) {
	    this.currentPage = val
		this.fetchData()
	},
	forDateCreate (row, column) {
        return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
	forDatePay (row, column) {
        return row.payTime == null ? '' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped

</style>
